<template>
    <div>
        <div class="details-header-container">
            <div class="details-header-img">
                <img :src="this.list.data.shopInfo.shopPic" alt="">
            </div>
            <div class="details-header-title">
                <div>{{this.list.data.shopInfo.shopName}}</div>
                <div>{{this.list.data.shopInfo.deliveryMsg}}</div>
                <div>{{this.list.data.shopInfo.minFee}}分钟</div>
            </div>
        </div>
        <div class="details-title-container">
            <div>点菜</div>
            <div>评价</div>
            <div>商家</div>
        </div>
        <div class="details-list-container">
            <div class="details-list-wrapper">
                <div class="details-list-left">
                    <div>
                        <div v-for="(item,index) in list.data.categoryList "
                        :key="index"
                        :class="currnet===index?'left-item-active':'left-item'"
                        @click="onClick(index)"
                        >
                            {{item.categoryName}}
                        </div>
                    </div>
                </div>
                <div class="details-list-right">
                    <div>
                        <div v-for="(item,index) in list.data.categoryList[this.currnet].spuList "
                        :key="index"
                        class="right-list-item"
                        >
                            <div class="right-list-item-img">
                                <img :src="item.littleImageUrl" alt="">
                            </div>
                            <div class="right-list-item-title">
                                <div>{{item.spuName}}</div>
                                <div>￥{{item.originPrice}}</div>
                                <div @click="toCart(item)">加入购物车</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="details-btn-container">
            <div class="details-btn-wrapper">
                <div @click="onShow">
                    购物车
                </div>
                <div>
                    ￥{{totalPrice}}
                </div>
            </div>
        </div>
        <div class="show-container" v-show="isShow">
            <div>
                <div>
                    <div @click="dele">删除</div>
                </div>
                <div v-for="(item,index) in cartitem "
                :key="index"
                class="show-store-item"
                >
                    <div>{{item.spuName}}</div>
                    <div>￥{{item.originPrice}}</div>
                    <div class="show-item-num">
                        <div @click="monius(item)">-</div>
                        <div>{{item.num}}</div>
                        <div @click="addnum(item)">+</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>


export default {
    data(){
        return{
            list:{},
            currnet:0,
            isShow:false
        }
    },
    methods:{
        onClick(index){
            this.currnet=index
        },
        onShow(){
            this.isShow=!this.isShow
        },
        toCart(item){

            this.$store.dispatch("cartlist",item)
        },
        monius(item){
            this.$store.dispatch("minuscount",item)
        },
        addnum(item){
            this.$store.dispatch("addcount",item)
        },
        dele(){
            this.isShow=!this.isShow
            this.$store.dispatch("deleall")
        }
    },
    computed:{
        cartitem:function(){
            return this.$store.state.cartitem
        },
        totalPrice:function(){
            return this.$store.state.totalPrice
        }
    },
    mounted(){
        
        
        this.list=this.$route.params.item
        // window.console.log(this.list)
    }
}
</script>
<style scoped>
.details-header-container{
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #000;
    color: #fff;
}
.details-header-img{
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.details-header-img img{
    width: 80%;
}
.details-header-title{
    width: 60%;
}
.details-title-container{
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.details-list-container{

    width: 100%;
    height: 465px;
    overflow: scroll;
    /* background: skyblue; */
}
.details-list-wrapper{
    width: 100%;
    height: 500px;
    display: flex;
    /* align-items: center; */
    justify-content: space-around;
    /* background: teal; */
}
.details-list-left{
    width: 30%;
    height: 465px;
    /* background: pink; */
}
.details-list-right{
    width: 70%;
    height: 465px;
    overflow: scroll;
    /* background: green; */
}
.left-item{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    height: 40px;
}
.left-item-active{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    height: 40px;
    color: red;
}
.right-list-item{
    width: 100%;
    height:150px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: skyblue; */
}
.right-list-item-img{
    width: 40%;
}
.right-list-item-img img{
    width: 80%;
}
.right-list-item-title{
    width: 60%;
}
.details-btn-container{
    width: 100%;
    height: 64px;
    position: fixed;
    bottom: 0;
    /* background: skyblue; */
}
.details-btn-wrapper{
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: start;
    background: #fff;
}
.show-container{
    width: 100%;
    /* height: 100px; */
    position: fixed;
    bottom: 64px;
    background: #fff;
}

.show-store-item{
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.show-item-num{
    width: 30%;
    display: flex;
    align-items: center;
    justify-content:space-around ;
}




</style>